<%--
  Created by IntelliJ IDEA.
  User: HKemmm
  Date: 2022/3/10
  Time: 17:03
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<html>
<head lang="en">
    <meta charset="utf-8"/>
    <title>个人信息</title>
    <link rel="stylesheet" type="text/css" href="/static/css/public.css"/>
    <link rel="stylesheet" type="text/css" href="/static/css/mygxin.css"/>

    <style>
        .btn-dizhi {
            display: none;
        }

        .btn1 {
            cursor: pointer;
        }

        .dizhi {

            border: 1px solid #E0E0E0;
            padding: 20px 0 0 24px;
            color: #757575;
            line-height: 20px;
        }

        .box-div {
            width: 230px !important;
            height: 136px !important;
        }

        .box-address {
            width: 254px !important;
            height: 156px !important;

        }

        .box-f {
            float: left;
            margin: 5px 12px;
            display: block;
        }
    </style>
</head>
<body>
<!------------------------------head------------------------------>
<div class="head ding">
    <div class="wrapper clearfix">
        <div class="clearfix" id="top">
            <h1 class="fl"><a href="/page/index.jsp"><img src="/static/moban/img/logo/logo.png"/></a></h1>
            <div class="fr clearfix" id="top1">
                <p class="fl">
                    <a href="login.html" id="login">登录</a>
                    <a href="reg.html" id="reg">注册</a>
                </p>
                <form action="#" method="get" class="fl">
                    <input type="text" placeholder="搜索"/>
                    <input type="button"/>
                </form>
                <div class="btn fl clearfix">
                    <a href="mygxin.html"><img src="/static/img/grzx.png"/></a>
                    <a href="#" class="er1"><img src="/static/img/ewm.png"/></a>
                    <a href="cart.html"><img src="/static/img/gwc.png"/></a>
                    <p><a href="#"><img src="/static/img/smewm.png"/></a></p>
                </div>
            </div>
        </div>
        <ul class="clearfix" id="bott">
            <li><a href="index.html">首页</a></li>
            <li>
                <a href="#">所有商品</a>
                <div class="sList">
                    <div class="wrapper  clearfix">
                        <a href="paint.html">
                            <dl>
                                <dt><img src="/static/img/nav1.jpg"/></dt>
                                <dd>浓情欧式</dd>
                            </dl>
                        </a>
                        <a href="paint.html">
                            <dl>
                                <dt><img src="/static/img/nav2.jpg"/></dt>
                                <dd>浪漫美式</dd>
                            </dl>
                        </a>
                        <a href="paint.html">
                            <dl>
                                <dt><img src="/static/img/nav3.jpg"/></dt>
                                <dd>雅致中式</dd>
                            </dl>
                        </a>
                        <a href="paint.html">
                            <dl>
                                <dt><img src="/static/img/nav6.jpg"/></dt>
                                <dd>简约现代</dd>
                            </dl>
                        </a>
                        <a href="paint.html">
                            <dl>
                                <dt><img src="/static/img/nav7.jpg"/></dt>
                                <dd>创意装饰</dd>
                            </dl>
                        </a>
                    </div>
                </div>
            </li>
            <li>
                <a href="flowerDer.html">装饰摆件</a>
                <div class="sList2">
                    <div class="clearfix">
                        <a href="proList.html">干花花艺</a>
                        <a href="vase_proList.html">花瓶花器</a>
                    </div>
                </div>
            </li>
            <li>
                <a href="decoration.html">布艺软饰</a>
                <div class="sList2">
                    <div class="clearfix">
                        <a href="zbproList.html">桌布罩件</a>
                        <a href="bzproList.html">抱枕靠垫</a>
                    </div>
                </div>
            </li>
            <li><a href="paint.html">墙式壁挂</a></li>
            <li><a href="perfume.html">蜡艺香薰</a></li>
            <li><a href="idea.html">创意家居</a></li>
        </ul>
    </div>
</div>
<!------------------------------idea------------------------------>
<div class="address mt">
    <div class="wrapper clearfix">
        <a href="index.html" class="fl">首页</a>
        <span>/</span>
        <a href="mygxin.html">个人中心</a>
        <span>/</span>
        <a href="address.html" class="on">地址管理</a>
    </div>
</div>

<!------------------------------Bott------------------------------>
<div class="Bott">
    <div class="wrapper clearfix">
        <div class="zuo fl">
            <h3>
                <a><img class="zuo-img" src="/myimg/${sessionScope.User.photo}"/></a>
                <p class="clearfix"><span class="fl">[${sessionScope.User.name}]</span><span class="fr">[退出登录]</span>
                </p>
                <input type="hidden" value="${sessionScope.User.id}" id="userId">
            </h3>
            <div>
                <h4>我的交易</h4>
                <ul>
                    <li><a href="/shop/car?id=${sessionScope.User.id}">我的购物车</a></li>
                    <li><a href="/shop/centre">我的中心</a></li>
                    <li><a href="/jump/myprod">评价晒单</a></li>
                </ul>
                <h4>个人中心</h4>
                <ul>
                    <li><a href="/jump/mygxin">我的中心</a></li>
                    <li class="on"><a href="/address/addressInfo?uid=${sessionScope.User.id}">地址管理</a></li>
                </ul>
                <h4>账户管理</h4>
                <ul>
                    <li><a href="/jump/mygrxx">个人信息</a></li>
                    <li><a href="/jump/remina">修改密码</a></li>
                </ul>
            </div>
        </div>
        <div class="you fl">
            <h2>收货地址</h2>
            <div class="add">
                <div class="box-address box-f">
                    <a id="addxad"><img src="/static/img/jia.png"/></a>
                    <span>添加新地址</span>
                </div>

                <c:forEach items="${address}" var="item" varStatus="stu">
                    <div class="dizhi box-div box-f">
                        <p>${item.addreas.name}</p>
                        <p>${item.addreas.phone}</p>
                        <p>${item.province} ${item.city} ${item.area}</p>
                        <p>${item.addreas.address}</p>
                        <p class="addp btn-dizhi">
                            <a class="btn1" id="readd" onclick="getAddressInfo(${item.addreas.id})">修改</a>
                            <a class="btn1" onclick="delAddress(${item.addreas.id})" id="deladd">删除</a>
                        </p>
                    </div>
                </c:forEach>
            </div>
        </div>
    </div>
</div>
<!--编辑弹框-->
<!--遮罩-->
<div class="mask"></div>
<div class="adddz">
    <form>
        <input id="add-name" type="text" placeholder="姓名" class="on"/>
        <input id="add-phone" type="text" placeholder="手机号"/>
        <div class="city">
            <select id="add-province">
                <option value="" hidden>省份/自治区</option>
            </select>
            <select id="add-city">
                <option value="" hidden>城市/地区</option>
            </select>
            <select id="add-area">
                <option value="" hidden>区/县</option>
            </select>
        </div>
        <textarea id="add-address" name="" rows="" cols="" placeholder="详细地址"></textarea>
        <div class="bc">
            <input type="button" onclick="insert()" value="保存"/>
            <input type="button" onclick="hide()" value="取消"/>
        </div>
    </form>
</div>
<div class="readd">
    <form>
        <input id="address-name" type="text" class="on" value="六六六"/>
        <input id="address-phone" type="text" value="157****0022"/>
        <input id="address-id" type="hidden">
        <div class="city">
            <select id="p1">
                <option value="省份/自治区">河北省</option>
            </select>
            <select id="c1">
                <option value="城市/地区">唐山市</option>
            </select>
            <select id="a1">
                <option value="区/县">路北区</option>
            </select>
        </div>
        <textarea id="address-detail" name="" rows="" cols="" placeholder="详细地址">高新产业园</textarea>
        <div class="bc">
            <input type="button" onclick="update()" value="保存"/>
            <input type="button" onclick="hide()" value="取消"/>
        </div>
    </form>
</div>
<!--返回顶部-->
<div class="gotop">
    <a href="cart.html">
        <dl>
            <dt><img src="/static/img/gt1.png"/></dt>
            <dd>去购<br/>物车</dd>
        </dl>
    </a>
    <a href="#" class="dh">
        <dl>
            <dt><img src="/static/img/gt2.png"/></dt>
            <dd>联系<br/>客服</dd>
        </dl>
    </a>
    <a href="mygxin.html">
        <dl>
            <dt><img src="/static/img/gt3.png"/></dt>
            <dd>个人<br/>中心</dd>
        </dl>
    </a>
    <a href="#" class="toptop" style="display: none">
        <dl>
            <dt><img src="/static/img/gt4.png"/></dt>
            <dd>返回<br/>顶部</dd>
        </dl>
    </a>
    <p>400-800-8200</p>
</div>


<!--footer-->
<div class="footer">
    <div class="top">
        <div class="wrapper">
            <div class="clearfix">
                <a href="#2" class="fl"><img src="/static/img/foot1.png"/></a>
                <span class="fl">7天无理由退货</span>
            </div>
            <div class="clearfix">
                <a href="#2" class="fl"><img src="/static/img/foot2.png"/></a>
                <span class="fl">15天免费换货</span>
            </div>
            <div class="clearfix">
                <a href="#2" class="fl"><img src="/static/img/foot3.png"/></a>
                <span class="fl">满599包邮</span>
            </div>
            <div class="clearfix">
                <a href="#2" class="fl"><img src="/static/img/foot4.png"/></a>
                <span class="fl">手机特色服务</span>
            </div>
        </div>
    </div>
    <p class="dibu">最家家居&copy;2013-2017公司版权所有 京ICP备080100-44备0000111000号<br/>
        违法和不良信息举报电话：400-800-8200，本网站所列数据，除特殊说明，所有数据均出自我司实验室测试</p>
</div>
<script src="/static/js/jquery-1.12.4.js" type="text/javascript" charset="utf-8"></script>
<script src="/static/js/public.js" type="text/javascript" charset="utf-8"></script>
<script src="/static/js/user.js" type="text/javascript" charset="utf-8"></script>

<script>
    var add_province = $("#add-province");
    var add_city = $("#add-city");
    var add_area = $("#add-area");

    var p1 = $("#p1");
    var c1 = $("#c1");
    var a1 = $("#a1");

    //初始化省份下拉选择框选项
    $(function () {
        provinces();

    });

    function provinces() {
        $.ajax({
            url: "/address/provinces",
            success: function (data) {
                for (var i = 0; i < data.length; i++) {
                    add_province.append("<option value='" + data[i].provinceid + "'>" + data[i].province + "</option>");
                }
            }
        });
    }

    function provinces1() {
        $.ajax({
            url: "/address/provinces",
            success: function (data) {
                for (var i = 0; i < data.length; i++) {
                    p1.append("<option value='" + data[i].provinceid + "'>" + data[i].province + "</option>");
                }
            }
        });
    }

    function city1(provinceid) {
        $.ajax({
            url: "/address/cities",
            data: {"pid": provinceid},
            success: function (data) {
                for (var i = 0; i < data.length; i++) {
                    c1.append("<option value='" + data[i].cityid + "'>" + data[i].city + "</option>");
                }
            }
        });
    }

    function area1(cityid) {
        $.ajax({
            url: "/address/areas",
            data: {"cid": cityid},
            success: function (data) {
                for (var i = 0; i < data.length; i++) {
                    a1.append("<option value='" + data[i].areaid + "'>" + data[i].area + "</option>");
                }
            }
        });
    }

    add_province.change(function () {
        //先清除城市区县两个下拉框的选项
        $("#add-city option:not(:first)").remove();
        $("#add-area option:not(:first)").remove();

        $.ajax({
            url: "/address/cities",
            data: {"pid": add_province.val()},
            success: function (data) {
                for (var i = 0; i < data.length; i++) {
                    add_city.append("<option value='" + data[i].cityid + "'>" + data[i].city + "</option>");
                }
            }
        });
    });

    add_city.change(function () {
        $("#add-area option:not(:first)").remove();

        $.ajax({
            url: "/address/areas",
            data: {"cid": add_city.val()},
            success: function (data) {
                for (var i = 0; i < data.length; i++) {
                    add_area.append("<option value='" + data[i].areaid + "'>" + data[i].area + "</option>");
                }
            }
        });
    });


    p1.change(function () {
        //先清除城市区县两个下拉框的选项
        $("#c1 option").remove();
        $("#a1 option").remove();

        c1.append('<option value="" hidden>城市/地区</option>');
        a1.append('<option value="" hidden>区/县</option>');

        $.ajax({
            url: "/address/cities",
            data: {"pid": p1.val()},
            success: function (data) {
                for (var i = 0; i < data.length; i++) {
                    c1.append("<option value='" + data[i].cityid + "'>" + data[i].city + "</option>");
                }
            }
        });
    });

    c1.change(function () {
        $("#a1 option").remove();
        a1.append('<option value="" hidden>区/县</option>');

        $.ajax({
            url: "/address/areas",
            data: {"cid": c1.val()},
            success: function (data) {
                for (var i = 0; i < data.length; i++) {
                    a1.append("<option value='" + data[i].areaid + "'>" + data[i].area + "</option>");
                }
            }
        });
    });

    function getAddressInfo(id) {
        $.ajax({
            url: "/address/getOneAddress?id=" + id,
            success: function (data) {
                $("#address-name").val(data.address.name);
                $("#address-phone").val(data.address.phone);
                $("#address-detail").val(data.address.address);
                $("#address-id").val(data.address.id);

                $("#p1 option").remove();
                $("#c1 option").remove();
                $("#a1 option").remove();

                p1.html('<option value="' + data.province.provinceid + '" hidden>' + data.province.province + '</option>');
                c1.html('<option value="' + data.city.cityid + '" hidden>' + data.city.city + '</option>');
                a1.html('<option value="' + data.area.areaid + '" hidden>' + data.area.area + '</option>');

                provinces1();
                city1(data.province.provinceid);
                area1(data.city.cityid);
            }
        });

        $(".mask").show();
        $(".readd").show();
    }

    function hide() {
        $(".mask").hide();
        $(".readd").hide();
        $(".adddz").hide();
    }

    function delAddress(id) {
        if (confirm("是否删除！")) {
            $.ajax({
                url: "/address/delAddress?id=" + id,
                success: function (response) {
                    if (response == "ok") {
                        alert("删除成功！");
                        location.reload();
                    }
                }
            });
        }
    }


    function insert() {
        const address = {
            id: null,
            userId: $("#userId").val(),
            address: $("#add-address").val(),
            phone: $("#add-phone").val(),
            name: $("#add-name").val(),
            isdefault: 0,
        }
        console.log($("#userId").val());


        $.ajax({
            url: "/address/record",
            data: {
                id: null,
                userId: $("#userId").val(),
                address: $("#add-address").val(),
                phone: $("#add-phone").val(),
                name: $("#add-name").val(),
                isdefault: 0,

                provinceid: add_province.val(),
                cityid: add_city.val(),
                areaid: add_area.val()
            },
            success: function (response) {
                console.log(response);
                if (response == "ok") {
                    alert("添加成功！");
                    location.reload();
                }
            },
            error: function (err) {
                console.log(err);
            }
        });
    }


    function update() {
        const address = {
            id: $("#address-id").val(),
            userId: $("#userId").val(),
            address: $("#address-detail").val(),
            phone: $("#address-phone").val(),
            name: $("#address-name").val(),
            isdefault: 0,
        }

        console.log(address);

        $.ajax({
            url: "/address/record",
            data: {
                id: $("#address-id").val(),
                userId: $("#userId").val(),
                address: $("#address-detail").val(),
                phone: $("#address-phone").val(),
                name: $("#address-name").val(),
                isdefault: 0,

                provinceid: p1.val(),
                cityid: c1.val(),
                areaid: a1.val()
            },
            success: function (response) {
                if (response == "ok") {
                    alert("修改成功！");
                    location.reload();
                }
            }
        });
    }

</script>
</body>
</html>
